<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>Login Page - Ace Admin</title>

    <meta name="description" content="User login page"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../assets/css/sweetalert.css">
    <!-- text fonts -->
    <link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="../assets/css/ace.min.css"/>
    <link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css"/>
    <script src="../assets/js/jquery-2.1.4.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/bootstrapValidator.min.js"></script>
    <script src="../assets/js/sweetalert.min.js"></script>
    <style>
        .form-group{
            margin-left:0;
            margin-right: 0;
        }
    </style>
</head>

<body class="login-layout light-login">
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="login-container">
                <div class="center">
                    <h1>
                        <i class="ace-icon fa fa-leaf green"></i>
                        <span class="red">考勤</span>
                        <span class="white" id="id-text2">系统</span>
                    </h1>
                </div>

                <div class="space-6"></div>

                <div class="position-relative">
                    <div id="login-box" class="login-box visible widget-box no-border">
                        <div class="widget-body">
                            <div class="widget-main">
                                <h4 class="header blue lighter bigger">
                                    <i class="ace-icon fa fa-coffee green"></i>
                                    请输入工号和密码
                                </h4>

                                <div class="space-6"></div>

                                <form class="form-horizontal" id="loginForm" role="form" style="">
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                            <span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="code"
                                                                   placeholder="工号"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                           <span class="block input-icon input-icon-right">
															<input type="password"
                                                                   class="form-control" name="password"
                                                                   placeholder="密码"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                    </div>
                                    <div class="space"></div>

                                    <div class="clearfix">
                                        <label class="inline">
                                            <input type="checkbox" class="ace"/>
                                            <span class="lbl"> 记住我</span>
                                        </label>

                                        <button type="button" class="width-35 pull-right btn btn-sm btn-primary"
                                                onclick="submitForm()">
                                            <i class="ace-icon fa fa-key"></i>
                                            <span class="bigger-110">登录</span>
                                        </button>
                                    </div>

                                    <div class="space-4"></div>
                                </form>

                                <div class="space-6"></div>
                            </div><!-- /.widget-main -->

                            <div class="toolbar clearfix">
                                <div class="toolbar center" style="width: 100%;">
                                    <a href="#" data-target="#signup-box" class="user-signup-link" style="text-shadow: none">
                                        立即注册
                                        <i class="ace-icon fa fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div><!-- /.widget-body -->
                    </div><!-- /.login-box -->

                    <div id="signup-box" class="signup-box widget-box no-border">
                        <div class="widget-body">
                            <div class="widget-main">
                                <h4 class="header green lighter bigger">
                                    <i class="ace-icon fa fa-users blue"></i>
                                    新用户注册
                                </h4>

                                <div class="space-6"></div>
                                <p> 填写详细信息: </p>

                                <form id="registerForm" class="form-horizontal">
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                            <span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="code"
                                                                   placeholder="工号"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                            <span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="name"
                                                                   placeholder="姓名"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                            <span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="password"
                                                                   placeholder="密码"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                            <span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="email"
                                                                   placeholder="邮箱"/>
															<i class="ace-icon fa fa-envelope"></i>
														</span>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                        <select class="form-control" name="sex">
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                        <select class="form-control" name="departmentId" id="departmentId">
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                        <label class="block">
                                            <input type="checkbox" class="ace" name="accept"/>
														<span class="lbl">
															我接受
															<a href="#">用户协议</a>
														</span>
                                        </label>
                                    </div>
                                    <div class="space-24"></div>

                                    <div class="clearfix" onclick="resetForm()">
                                        <button type="reset" class="width-30 pull-left btn btn-sm">
                                            <i class="ace-icon fa fa-refresh"></i>
                                            <span class="bigger-110">清空</span>
                                        </button>

                                        <button type="button"
                                                class="width-65 pull-right btn btn-sm btn-success" onclick="register()">
                                            <span class="bigger-110">注册</span>

                                            <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <div class="toolbar center">
                                <a href="#" data-target="#login-box" class="back-to-login-link">
                                    <i class="ace-icon fa fa-arrow-left"></i>
                                    返回登录
                                </a>
                            </div>
                        </div><!-- /.widget-body -->
                    </div><!-- /.signup-box -->
                </div><!-- /.position-relative -->

                <div class="navbar-fixed-top align-right">
                    <br/>
                    &nbsp;
                    <a id="btn-login-dark" href="#">Dark</a>
                    &nbsp;
                    <span class="blue">/</span>
                    &nbsp;
                    <a id="btn-login-blur" href="#">Blur</a>
                    &nbsp;
                    <span class="blue">/</span>
                    &nbsp;
                    <a id="btn-login-light" href="#">Light</a>
                    &nbsp; &nbsp; &nbsp;
                </div>
            </div>
        </div><!-- /.col -->
    </div><!-- /.row -->
</div><!-- /.main-container -->

<!-- basic scripts -->
<!-- inline scripts related to this page -->
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "/department/",
            type: 'get',
            data: {pageSize: 10},
            async: false,
            success: function (result) {
                if (result.success) {
                    var departmentList = result.department.list;
                    for(var i=0;i<departmentList.length;i++){
                        $("#departmentId").append("<option value='" + departmentList[i].id + "'>" + departmentList[i].name + "</option>");
                    }
                }
            }
        });
        formValidator();
    });
    function submitForm() {
        //开启验证
        $('#loginForm').data('bootstrapValidator').validate();
        if (!$('#loginForm').data('bootstrapValidator').isValid()) {
            return;
        }
        $.ajax({
            url: "/employee/login",
            type: 'POST',
            data: $("#loginForm").serialize(),
            async: false,
            success: function (result) {
                if (result.success) {
                    window.parent.location = '/home/index';
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "登录失败", "error");
            }
        });
    }
    function resetForm() {
        $("#registerForm").data('bootstrapValidator').destroy();
        $('#registerForm').data('bootstrapValidator', null);
        formValidator();
    }
    function register() {
        //开启验证
        $('#registerForm').data('bootstrapValidator').validate();
        if (!$('#registerForm').data('bootstrapValidator').isValid()) {
            return;
        }
        $.ajax({
            url: "/employee/register",
            type: 'POST',
            data: $("#registerForm").serialize(),
            async: false,
            success: function (result) {
                if (result.success) {
                    swal({
                        title: "Tip",
                        text: "注册成功",
                        timer: 2000,
                        showConfirmButton: false
                    },function () {
                        window.location = '/home/login';
                    });
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "注册失败", "error");
            }
        });
    }
    function formValidator() {
        $('#loginForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                code: {
                    message: '工号验证失败',
                    validators: {
                        notEmpty: {
                            message: '工号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: '工号只能包含数字'
                        }
                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
            }
        });
        $('#registerForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                code: {
                    message: '工号验证失败',
                    validators: {
                        notEmpty: {
                            message: '工号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: '工号只能包含数字'
                        }
                    }
                },
                name: {
                    message: '姓名验证失败',
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        }
                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
            }
        });
    }
    jQuery(function ($) {
        $(document).on('click', '.toolbar a[data-target]', function (e) {
            e.preventDefault();
            var target = $(this).data('target');
            $('.widget-box.visible').removeClass('visible');//hide others
            $(target).addClass('visible');//show target
        });
    });
    //you don't need this, just used for changing background
    jQuery(function ($) {
        $('#btn-login-dark').on('click', function (e) {
            $('body').attr('class', 'login-layout');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-light').on('click', function (e) {
            $('body').attr('class', 'login-layout light-login');
            $('#id-text2').attr('class', 'grey');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-blur').on('click', function (e) {
            $('body').attr('class', 'login-layout blur-login');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'light-blue');

            e.preventDefault();
        });

    });
</script>
</body>
</html>
